<template>
  <view class="record-container">
    <z-paging ref="pagingRef" v-model="dataList" :auto="false" @query="queryList">
      <template #top>
        <mt-navbar :show-back="true" title="充值记录"></mt-navbar>
      </template>
      <view class="px-32rpx py-32rpx">
        <view v-for="(item, index) in dataList" :key="index" class="record-item px-32rpx py-40rpx">
          <text class="text-#1C213E text-32rpx fw-600">{{ item.createTime }}</text>
          <view class="mt-40rpx">
            <view class="mb-16rpx">
              <text class="text-#727687 text-28rpx fw-400">充值金额：</text>
              <text class="text-#EFB339 text-28rpx fw-600">￥{{ amountTransfer(item.orderAmount) }}</text>
            </view>
            <view class="mb-16rpx">
              <text class="text-#727687 text-28rpx fw-400"
                >充值方式：{{ item.paymentChannel ? ['', '微信', '支付宝', '水单'][item.paymentChannel] : '' }}</text
              >
            </view>
            <view class="mb-16rpx">
              <text class="text-#727687 text-28rpx fw-400"
                >审批状态：{{
                  item.financeApproveStatus !== null || item.financeApproveStatus !== undefined
                    ? ['待审批', '审批通过', '审批驳回'][item.financeApproveStatus]
                    : ''
                }}</text
              >
            </view>
            <view v-if="item.financeApproveStatus === 2" class="mb-16rpx">
              <text class="text-#727687 text-28rpx fw-400">驳回原因：{{ item.approveRejectReason }}</text>
            </view>
            <view v-if="item?.paymentChannel === 3" class="flex flex-col">
              <text class="text-#727687 text-28rpx fw-400">支付凭证：</text>
              <view v-if="item.payVoucher.length" class="flex">
                <mt-image
                  v-for="(subItem, index) in item.payVoucher"
                  :key="index"
                  :class="[{ 'w-100rpx': isImage(subItem.url), 'h-100rpx': isImage(subItem.url) }, 'mt-16rpx', 'mr-8rpx']"
                  :src="subItem.url"
                  :urls="
                    item.payVoucher.map((items) => {
                      if (isImage(items.url)) {
                        return items.url;
                      }
                    })
                  "
                  :name="subItem.name"
                ></mt-image>
              </view>
            </view>
          </view>
        </view>
      </view>
    </z-paging>
  </view>
</template>

<script name="RechargeRecord" setup>
import { getProviderBondOrderPage } from '@/subBond/api/bond.js';
import { amountTransfer } from '@/utils/tools';
import { onLoad } from '@dcloudio/uni-app';
import { isImage } from '@/utils/tools.js';

const pagingRef = ref();
const dataList = ref([]);

const recordList = ref([]);
// 查询充值记录列表
const queryList = async (pageNum, pageSize) => {
  try {
    const params = {
      lastId: recordList.value && recordList.value.length > 0 && pageNum > 1 ? dataList.value[dataList.value.length - 1].providerId : undefined,
      pageSize: 10
    };
    const res = await getProviderBondOrderPage(params);

    recordList.value = res.data.items;
    recordList.value.forEach((item) => {
      item.payVoucher = item.payVoucher ? JSON.parse(item.payVoucher) : [];
    });
    pagingRef.value.complete(res.data.items);
  } catch (e) {
    pagingRef.value.complete(false);
  }
};

onLoad(() => {
  queryList();
});
</script>

<style lang="scss" scoped>
.record-container {
  border: 1px solid red;
  .record-item {
    background: #ffffff;
    border-radius: 4px 4px 4px 4px;
    margin-bottom: 32rpx;
  }
}
</style>
